@charset "utf-8";
@import "libs/mixin";
@import "libs/layer";
@import "common";

header{padding: 10px;
    @extend .bgBlue;
    h3{position: absolute;left: 26px;top: 16px;}
    h2{width: 100%;margin: 0 auto;text-align: center;}
    >div{position: absolute;right: 26px;top: 10px;
        >div{float: left;padding: 10px;
            p:nth-child(1){border-bottom: 1px solid #fff;}  
        }
        >ul{float: left;border: 1px solid #fff;padding: 10px;
            li{display: inline-block;padding: 0 8px;}
            img{width: 25px;}
            span{padding-left: 6px;color:#d6d0d0}
        }
        @extend .clearfix;
    }
}

footer{background: #092f70;padding-bottom: 5px;
    ul{margin: 0 5px 5px;background: #053a64;
        li{float: left;width: calc(100% / 7);color: #d6d0d0;padding: 10px 20px;border: 1px solid #001e40;
            img{width: 28px;}
            span{vertical-align: middle;font-size: 17px;color: #d6d0d0;padding-left: 17px;}
            &.active{background: #1a7fc7;}
        } 
        @extend .clearfix;
    }
}


.container{width: 100%;min-width: 755px;margin: 0 auto;overflow: hidden;
    >aside{display: block;width: 24%;float: left;
        &:nth-child(2){margin-right: 0;}
    }
    section{width: 52%;float: left;
    
    }
    .row{background: #111c30;margin: 20px 0;
        h6{border-bottom: 1px solid #27394f;padding: 8px 26px;}
        >div{padding: 10px 26px;}
    }
    .wave-box{
        .wave-item{width: calc((100% - 26px)/2);float: left;height: 120px;margin-bottom: 20px;position: relative;
            &:nth-child(1){background: #1e6581;margin-right: 26px;
                .wave{background: url(../img/wave.png) no-repeat;}
            }
            &:nth-child(2){background: #1b5583;
                .wave{background: url(../img/wave.png) no-repeat;}
            }
            &:nth-child(3){background: #4f3b83;margin-right: 26px;
                .wave{background: url(../img/wave.png) no-repeat;}
            }
            &:nth-child(4){background: #57577b;
                .wave{background: url(../img/wave.png) no-repeat;}
            }
            span{position: absolute;top: 11px;left: 16px;z-index: 1;letter-spacing: 2px;}
            p{position: absolute;right: 10px;bottom: 10px;z-index: 1;
                em{font-size: 20px;padding-right: 7px;}
            }
        }
        .wave-cont{width: 100%;height: 100%;position: relative;overflow: hidden;
            .wave{-webkit-animation: move_wave 3s linear infinite;position: absolute;left: 0px;bottom: 0;width: 408px;}
        }
        @extend .clearfix;
    }
    .progress-box{
        .pro-item{margin-bottom: 15px;
            >span{display: inline-block;width: 32px;float: left;margin-right:14px}
            >p{margin-bottom: 6px;
                span{float: right;}
            }
            >div{width: calc( 100% - 46px );height:10px; background: #3b4755;margin-left:46px;border-radius: 20px;
                >p{height: 100%;border-radius: 20px;
                    &.bg1{background: #3ec7d1;}
                    &.bg2{background: #3a90dd;}
                    &.bg3{background: #b65082;}
                    &.bg4{background: #f1be03;}
                    &.bg5{background: #9d1c32;}
                }
            }
        }
    }
    .pie-box{position: relative;
        .num{position: absolute;font-size: 30px;
            span{padding-left: 15px;}
            p{font-size: 12px;}
            i{width: 20px;height: 10px;display: inline-block;border-radius: 3px;margin-right: 8px;}
        }
        .bg1{top: 45px;
            i{background:#41fbf8;}
            &:after{content: "";position: relative;bottom: -36px;border: 1px; width: 121%; background: #fff;height: 1px;display: block;opacity: 0.1;}
        }
        .bg2{top: 45px;right: 20px;
            i{background:#3a7bff;}
            &:after{content: "";position: relative;bottom: -36px;border: 1px; width: 121%; background: #fff;height: 1px;display: block;opacity: 0.1;}
        }
        .bg3{bottom: 45px;
            i{background:#e04f92;}
        }
        .bg4{bottom: 45px;right: 20px;
            i{background:#9b5cff;}
        }
    }
    
    
    @extend .clearfix;
}












